$(function () {

  // 1.商品id
  const url = location.search.replace('?', '');
  const id = url.split('=')[1];

  // 2.ajax请求
  const cover = $('.cover');
  const right = $('.right');
  const pInfo = $('.pInfo');
  const image = $('.image');

  const left = $('.left');
  const box = $('.box');
  const tops = $('.top');

  information({
    id: id,
  }).then(res => {
    const { status, msg, data } = res;
    const { goods_des, goods_img, goods_imgSrcs, goods_price, goods_title } = data;

    if (status) {

      const hello = $('.hello');
      const Admit = $('.navAdmit');
      const Reg = $('.navReg');
      // 1.1获取谁在登录
      let admit = localStorage.getItem('someone');
      // admit ? hello.html(admit) : hello.html('考拉欢迎你');
      // 1.3处理登录后事件(显示登录名等)
      if (admit) {
        hello.html(admit);
        Admit.hide();
        Reg.hide();
      }



      // 1.放大镜其余小图
      let arr = goods_imgSrcs.split(',');
      // console.log(arr);
      let pics = '';
      arr.forEach(v => {
        pics += `<li class="small"><img src="${v}" alt="" class="thun"></li>`
      });
      image.append(pics);


      // 2.插入左边小图
      let html = '';
      html += `
      <img src="${goods_img}" alt="" class="pic">
      `
      cover.before(html);

      // 3.插入右边大图
      let htmlRight = '';
      htmlRight += `
       <img src="${goods_img}" alt="" class="picOne">
       `
      right.html(htmlRight);

      // 4.插入产品信息
      let message = '';
      message += `
      <dt>${goods_des}</dt>
      <dd class="sell">
        <span class="sellOne">售价</span>
        <span class="sellTwo">¥${goods_price}起</span>
      </dd>
      <dd class="fare">
        <span>运费</span>
        <span>北京至武汉江夏区</span>
        <span>所选地区免运费</span>
      </dd>
      <dd class="meal">
        <span>套餐</span>
        <span>标配（20w充电套餐）</span>
      </dd>
      <dd class="number">
        <span>数量</span>
        <div class="line">
          <button class="reduce">-</button>
          <input type="text" value="1"  class="happen">
          <button class="add">+</button>
        </div>
      </dd>
      <dd class="cart">
        <button class="buy  back">继续购物</button>
        <button class="addCart">
          <span>加入购物车</span>
        </button>
      </dd>
      `
      pInfo.append(message);

      //5.放大镜
      tops.on('mouseover', function () {
        cover.show();
        right.show();
        right.css("z-index", 300);


      })
      tops.on('mouseout', function () {
        cover.hide();
        right.hide();
      })

      let r = cover.innerWidth() / 2;
      const maxX = tops.outerWidth() - cover.innerWidth();
      const maxY = tops.outerHeight() - cover.innerWidth();
      console.log(maxX);
      const pic = $('.pic');
      const picOne = $('.picOne');

      // console.log(left.offset());

      tops.on('mousemove', function (e) {
        const maxX1 = picOne.outerWidth() - right.outerWidth();
        const maxY1 = picOne.outerHeight() - right.outerHeight();

        let x = e.pageX - left.offset().left - r;
        let y = e.pageY - left.offset().top - r;

        if (x < 0) x = 0;
        if (y < 0) y = 0;
        if (x > maxX) x = maxX;
        if (y > maxY) y = maxY;

        cover.css("left", x);
        cover.css("top", y);

        let x1 = x * maxX1 / maxX;
        let y1 = y * maxY1 / maxY;
        picOne.css("left", -x1);
        picOne.css("top", -y1);


      })

      // 6.切换小图
      const lis = $('.small');
      lis.click(function () {
        path = this.children[0].getAttribute('src');
        pic.attr('src', path);
        picOne.attr('src', path);
      })

      // 7.加减事件
      const oAdd = $('.add');
      const oReduce = $('.reduce');
      oAdd.click(function () {
        let value = oAdd.prev().val();
        value++;
        oAdd.prev().val(value);

      })
      oReduce.click(function () {
        let values = oReduce.next().val();
        // console.log(oReduce.next().val());

        if (values > 1) {
          values--;
          oReduce.next().val(values);
        }
      })


      $('.back').click(function () {
        location.href = '../html/4.goodlist.html';
      })
      const addCart = $('.addCart');
      const happen = $('.happen');
      addCart.click(function () {
        let val = Number(happen.val());
        console.log(typeof val);
        if (admit) {
          shopping(
            {
              username: admit,
              id: id,
              num: val
            }
          ).then(res => {
            console.log(res);
            console.log(admit);
            location.href = '../html/6.cart.html';
          })

        } else {
          alert('请先登录');
          location.href = '../html/3.login.html';
        }




      })





    } else {
      alert(msg);
    }

  })







})